<template>
  <div>
    <van-nav-bar title="我的收藏"></van-nav-bar>
    <div class="list-item" v-for="item in list" :key="item.id" @click="$router.push(`/detail/${item.id}`)">
     <div class="header">
         <img :src="item.avatar" alt="" width="40px" height="40px">
         <div>
          <div>{{ item.stem }}</div>
          <div>
            <span>{{ item.creator }}</span>
            <span>|</span>
            <span>{{ item.createdAt }}</span>
          </div>
         </div>
     </div>
     <div class="content">
            {{ item.content }}
     </div>
     <div class="footer">
         <span>点赞 {{ item.likeCount }} </span>
         <span>|</span>
         <span>浏览量 {{ item.views }}</span>
     </div>
   </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      list:[],
      token:localStorage.getItem('token'),
      collectTotal:0
    }
  },
  created(){
    this.getList()
  },
  methods:{
    async getList(){
      //http://interview-api-t.itheima.net/h5/interview/opt/list
      //收藏、点赞题目列表查询  get
      const res=await axios.get('http://interview-api-t.itheima.net/h5/interview/opt/list',{
        params:{
          optType:2,
          page:1,
          pageSize:6,
        },
        headers:{
          Authorization:`Bearer ${this.token}`
        }
      })
      console.log(res)
      this.list=res.data.data.rows
      this.collectTotal=res.data.data.total
      console.log('收藏总数',this.collectTotal)
      this.$emit('emitTotal',this.collectTotal)
      


    }
  }

}
</script>



<style scoped lang="less">

.list-item{
    width: 340px;
    height: 110px;
    // background-color: orange;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    margin: auto;
    .header{
      display: flex;
      font-size: 14px;

      img{
        margin-right: 20px;
      }

      span{
        font-size: 10px;
        color: #999;
      }
    }
   
    .content{
      font-size: 14px;
      margin: 6px 0;
      // 最多两行文本后面省略
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      color: #666;
    }

    .footer{
      font-size: 12px;
      color: #999;
    }

   }

</style>